<template>
	<view class="mall-top-bar">
		<scroll-view :scroll-x="true" :scroll-with-animation="true" :scroll-left="leftTop">
		<view class="bars">
			<view class="bar" @click="click(index)" :class="{sel:bar.sel}" v-for="(bar,index) in bars" :key="index" >
				<text class="name">{{bar.name}}</text>
			</view>
		</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		props:{
			bars:Array
		},
		methods:{
			click(index){
				this.$emit("changeType",index)
				// this.bars.forEach(bar => {
				// 	if(bar.sel){
				// 		bar.sel = false
				// 	}
				// })	
				// this.$set(this.bars[index],'sel',true)
				// console.log('--'+this.bars[index].sel)
				if(index > 2){
					this.leftTop = (index-2)*80
				}else{
					this.leftTop = 0
				}
			}
		},
		data() {
			return {
				leftTop:0
			};
		}
	}
</script>

<style lang="stylus" scoped>
	.mall-top-bar
		padding 0 22upx
		background-color #A14545
		.bars
			width fit-content
			height 111upx
			display flex
			align-items center
			.bar
				display flex
				align-items center
				justify-content center
				height 50upx
				width 60upx
				color #FFFFFF
				font-size 28upx
				margin-right 100upx
				&.sel
					color #DF9F3E
					border-bottom 1px solid #DF9F3E
</style>
